<template>
  <div>
    <div class="sx-top-search">
      <ul class="search-sort" ref="searchSort">
        <li class="active">合肥</li>
        <li>芜湖</li>
        <li>亳州</li>
        <li>淮南</li>
        <li>宿州</li>
        <li>六安</li>
        <li>宣城</li>
      </ul>
    </div>
    <div class="content">
      <ul class="bg-fff">
        <li class="con">
          <div class="md-img"><img src="./images/mendian.png"></div>
          <div class="text">
            <div>
              <span class="name"> 百川名品政务区绿地赢海店</span>
              <span class="zhiying">直营店</span>
              <span class="distance">3.14km</span>
            </div>
            <div class="addr">合肥市政务区佛子岭路绿地赢海B座1层109</div>
            <div class="phone">联系电话：0551-68947900</div>
          </div>
        </li>
      </ul>


    </div>
  </div>

</template>

<script>

  export default {
    components: {},
    data(){
      return {

      }
    },
    mounted(){

    },
    methods: {},
    filters: {},
  }
</script>


<style scoped>
  .content{
    text-align:left;
    padding-top: 2rem;
    margin: 0 .75rem;
  }

 .con{
    border-radius: .25rem;
    margin-top: .75rem;
  }

  .md-img img{
    width: 100%;
    height: 100%;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
  }
  .text{
    padding: .5rem;
    overflow: hidden;
  }
  .name{
    font-size: .75rem;
    color: #333333;
  }
  .zhiying{
    font-size: 9px;
    color: #FF7871;
    border: 1px solid #FF7871;
    border-radius: 100px;
    padding: 1px .25rem;
    margin-left: .25rem;
  }
  .distance{
    float: right;
    font-size: .6rem;
    color: #777777;
    margin-top: .2rem;
  }
  .addr{
    font-size: .6rem;
    color: #999;
    margin-top: .5rem;
  }
  .phone{
    font-size: .6rem;
    color: #999;
    margin-top: .25rem;
  }

  .sx-top-search{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:2.75rem;
    z-index:9;
    overflow-y:hidden;
    overflow-x:scroll;
  }
  .search-sort{
    background:#fff;
    overflow:hidden;
    width:500px;
    height:2.75rem;
    border-bottom:1px solid #efefef;
  }
  .search-sort li{
    float:left;
    font-size:.7rem;
    color:#777777;
    text-align:center;
    padding:.5rem 1rem;
    margin-bottom: .25rem;
  }
  .search-sort li.active{
    font-size: .7rem;
    color: #E93B3D;
    border-bottom:2px solid #F46058;
  }
</style>
